<template>
    <div>
        <el-drawer :visible.sync="show" size="1000px;" :append-to-body="true">
            <div slot="title">
                <button style="height:0;width: 0;padding: 0;border: none;"></button>
                <h4 style="margin-bottom: 0;font-weight: bold;">
                    <el-tag size="mini" style="vertical-align: bottom;">工单详情</el-tag>
                    <span style="vertical-align: bottom;">{{list.shop.shop_name}}</span>
                    <el-button v-if="!loading && list.work.status !== 4 && list.work.status !== 6" type="danger" size="mini" icon="el-icon-delete" circle @click="cancelShow = true"></el-button>
                </h4>
            </div>
            <div style="margin: 20px;" v-if="list.work.step.steps.length">
                <el-steps :active="list.work.step.current_step" finish-status="success" :process-status="process_status">
                    <el-step v-for="(item,index) in list.work.step.steps" :key="index" :title="item"></el-step>
                </el-steps>
            </div>
            <div style="margin: 10px;" v-else-if="!loading && !list.work.step.steps.length">
                <el-alert :closable="false" :title="'此工单已关闭：'+list.work.error_reason_name" type="error" effect="dark"></el-alert>
            </div>
            <div class="detail_form">

                <el-card shadow="hover" v-if="list.settlement.length">
                    <div slot="header">
                        <span style="font-weight: bold;">红包领取信息</span>
                    </div>
                    <el-table :data="list.settlement" border stripe style="width: 100%" v-loading="loading">
                        <el-table-column prop="mch_billno" width="300" label="红包id"></el-table-column>
                        <el-table-column prop="created_at" label="发送时间"></el-table-column>
                        <el-table-column prop="rcv_time" label="领取时间"></el-table-column>
                        <el-table-column prop="reason" label="领取失败原因"></el-table-column>
                        <el-table-column label="领取状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.received === 0">待领取</span>
                                <span v-if="scope.row.received === 1">已领取</span>
                                <el-button type="text"  v-if="scope.row.received === 2" @click="resend(scope.row.work_id)">已退回</el-button>
                                <span v-if="scope.row.received === 3">已重发</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
                <el-card shadow="hover" :hidden="list.work.status !== 1">
                    <div slot="header">
                        <span style="font-weight: bold;">投稿验收</span>
                    </div>
                    <el-form label-width="120px"  ref="accept_form" :model="accept_form" v-loading="loading" class="submit_form">
                        <el-form-item label="投稿时间">{{list.work.submit_time}}</el-form-item>
                        <el-form-item label="投稿图片">
                            <el-image style="width: 100px; height: 100px"
                                      :src="list.work.submit_img"
                                      :preview-src-list="[list.work.submit_img]"
                                      fit="contain"></el-image>
                        </el-form-item>
                        <el-form-item label="投稿备注" v-if="list.work.submit_remark">{{list.work.submit_remark}}</el-form-item>
                        <el-form-item label="是否验收通过" prop="accept">
                            <el-radio-group v-model="accept_form.accept" size="small">
                                <el-radio-button :label="true" >通过</el-radio-button>
                                <el-radio-button :label="false">拒回</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="验收意见" prop="accept_remark">
                            <el-input type="textarea" v-model="accept_form.accept_remark"></el-input>
                        </el-form-item>
                        <el-form-item style="margin-top: 8px;">
                            <el-button type="primary" @click="onAccept">确定</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card shadow="hover" :hidden="list.work.status !== 3">
                    <div slot="header">
                        <span style="font-weight: bold;">工单结算</span>
                    </div>
                    <el-form label-width="120px"  ref="settlement_form" :model="settlement_form" v-loading="loading" class="submit_form">
                        <el-form-item label="投稿时间">{{list.work.submit_time}}</el-form-item>
                        <el-form-item label="投稿图片">
                            <el-image style="width: 100px; height: 100px"
                                      :src="list.work.submit_img"
                                      :preview-src-list="[list.work.submit_img]"
                                      fit="contain"></el-image>
                        </el-form-item>
                        <el-form-item v-if="list.work.submit_remark" label="投稿备注">{{list.work.submit_remark}}</el-form-item>
                        <el-form-item label="是否通过结算" prop="settlement">
                            <el-radio-group v-model="settlement_form.settlement" size="small">
                                <el-radio-button :label="true" >通过</el-radio-button>
                                <el-radio-button :label="false">拒回</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="结算备注" prop="settlement_remark">
                            <el-input type="textarea" v-model="settlement_form.settlement_remark"></el-input>
                        </el-form-item>
                        <el-form-item style="margin-top: 8px;">
                            <el-button type="primary" @click="onSettlement">确定</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card shadow="hover" v-if="list.work.hang_up.length">
                    <div slot="header">
                        <span style="font-weight: bold;">申诉信息</span>
                    </div>
                    <el-table :data="list.work.hang_up" border stripe style="width: 100%" v-loading="loading">
                        <el-table-column prop="feedback_name" label="审核状态">
                            <template slot-scope="scope">
                                <el-button type="text" v-if="!scope.row.feedback" @click="hangUp(scope.row.hang_id)">{{scope.row.feedback_name}}</el-button>
                                <span v-else>{{scope.row.feedback_name}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="refused_at" width="145" label="拒回时间"></el-table-column>
                        <el-table-column prop="refused_at" width="145" label="申诉时间"></el-table-column>
                        <el-table-column prop="feedback_at" width="145" label="审核时间"></el-table-column>
                        <el-table-column prop="refuse_reason" label="拒回信息"></el-table-column>
                        <el-table-column prop="appeal_remark" label="申诉信息"></el-table-column>
                        <el-table-column prop="feedback_remark" label="审核信息"></el-table-column>
                    </el-table>
                </el-card>
                <el-card shadow="hover" v-if="list.work.status === 5">
                    <div slot="header">
                        <span style="font-weight: bold;">投稿拒回信息</span>
                    </div>
                    <el-form label-width="80px" v-loading="loading">
                        <el-form-item label="投稿时间">{{list.work.submit_time}}</el-form-item>
                        <el-form-item label="投稿图片">
                            <el-image style="width: 100px; height: 100px"
                                      :src="list.work.submit_img"
                                      :preview-src-list="[list.work.submit_img]"
                                      fit="contain"></el-image>
                        </el-form-item>
                        <el-form-item label="拒回原因" v-if="!list.work.accept_time && list.work.accept_remark">{{list.work.accept_remark}}</el-form-item>
                        <el-form-item v-if="list.work.submit_remark" label="投稿备注">{{list.work.submit_remark}}</el-form-item>
                    </el-form>
                </el-card>
                <el-card shadow="hover">
                    <div slot="header">
                        <span style="font-weight: bold;">工单信息</span>
                    </div>
                    <el-form label-width="80px" v-loading="loading">
                        <el-form-item label="工单编号">{{list.work.work_no}}</el-form-item>
                        <el-form-item label="接单时间">{{list.work.receive_time}}</el-form-item>
                        <el-form-item label="更新时间">{{list.work.updated_at}}</el-form-item>
                        <el-form-item label="取消原因">{{list.work.error_reason? list.work.error_reason_name: '-'}}</el-form-item>
                        <el-form-item label="工单金额">{{list.work.payment}}</el-form-item>
                        <el-form-item label="是否到店">{{list.order.offline? '是': '否'}}</el-form-item>
                        <el-form-item label="探店起期">{{list.order.start_date}}</el-form-item>
                        <el-form-item label="探店止期">{{list.order.end_date}}</el-form-item>
                        <el-form-item v-if="list.order.remark" label="商家要求">{{list.order.remark}}</el-form-item>
                        <el-form-item v-if="list.work.clock_in_img" label="打卡截图">
                            <el-image style="width: 100px; height: 100px;margin-right: 10px;"
                                      :preview-src-list="[list.work.clock_in_img]"
                                      :src="list.work.clock_in_img"
                                      fit="cover"></el-image>
                        </el-form-item>
                        <el-form-item v-if="list.order.shop_img" label="商家图片" style="flex: 1 1 auto;">
                            <el-image style="width: 100px; height: 100px;margin-right: 10px;"
                                      :preview-src-list="list.order.shop_img"
                                      v-for="(item,index) in list.order.shop_img"
                                      :key="index"
                                      :src="item"
                                      fit="cover"></el-image>
                        </el-form-item>
                    </el-form>
                </el-card>
                <el-card shadow="hover">
                    <div slot="header">
                        <span style="font-weight: bold;">商家信息</span>
                    </div>
                    <el-form label-width="80px" v-loading="loading">
                        <el-form-item label="店铺名称">{{list.shop.shop_name}}</el-form-item>
                        <el-form-item label="联系人">{{list.shop.contact_man}}</el-form-item>
                        <el-form-item label="联系电话">{{list.shop.contact_phone}}</el-form-item>
                        <el-form-item label="微信昵称">{{list.shop.nickname}}</el-form-item>
                        <el-form-item label="微信手机">{{list.shop.phone}}</el-form-item>
                        <el-form-item label="openid">{{list.shop.openid}}</el-form-item>
                        <el-form-item label="店铺区域">{{list.shop.short_name}}</el-form-item>
                        <el-form-item label="店铺地址">{{list.shop.address}}</el-form-item>
                        <el-form-item label="店铺链接">{{list.shop.link_url}}</el-form-item>
                    </el-form>
                </el-card>
                <el-card shadow="hover">
                    <div slot="header">
                        <span style="font-weight: bold;">达人信息</span>
                    </div>
                    <el-form label-width="80px" v-loading="loading">
                        <el-form-item label="平台账号">{{list.receiver.account_name}}</el-form-item>
                        <el-form-item label="微信昵称">{{list.receiver.nickname}}</el-form-item>
                        <el-form-item label="联系电话">{{list.receiver.phone}}</el-form-item>
                        <el-form-item label="openid">{{list.receiver.openid}}</el-form-item>
                    </el-form>
                </el-card>
                <el-card shadow="hover" v-if="list.work.accept_time && list.work.status !== 5">
                    <div slot="header">
                        <span style="font-weight: bold;">投稿信息</span>
                    </div>
                    <el-form label-width="80px" v-loading="loading">
                        <el-form-item label="投稿时间">{{list.work.submit_time}}</el-form-item>
                        <el-form-item label="投稿图片">
                            <el-image style="width: 100px; height: 100px"
                                      :src="list.work.submit_img"
                                      :preview-src-list="[list.work.submit_img]"
                                      fit="contain"></el-image>
                        </el-form-item>
                        <el-form-item v-if="list.work.submit_remark" label="投稿备注">{{list.work.submit_remark}}</el-form-item>
                    </el-form>
                </el-card>
                <el-card shadow="hover" v-if="list.work.settlement_time">
                    <div slot="header">
                        <span style="font-weight: bold;">验收信息</span>
                    </div>
                    <el-form label-width="80px" v-loading="loading">
                        <el-form-item label="验收时间">{{list.work.accept_time}}</el-form-item>
                        <el-form-item label="验收人">{{list.work.accept_user_name}}</el-form-item>
                        <el-form-item label="验收备注">{{list.work.accept_remark}}</el-form-item>
                    </el-form>
                </el-card>
                <el-card shadow="hover" v-if="list.work.settlement_time">
                    <div slot="header">
                        <span style="font-weight: bold;">结算信息</span>
                    </div>
                    <el-form label-width="80px" v-loading="loading">
                        <el-form-item label="结算时间">{{list.work.settlement_time}}</el-form-item>
                        <el-form-item label="结算人">{{list.work.settlement_user_name}}</el-form-item>
                        <el-form-item label="结算金额">{{list.work.payment}}</el-form-item>
                        <el-form-item label="结算备注">{{list.work.settlement_remark}}</el-form-item>
                    </el-form>
                </el-card>
                <el-card shadow="hover" :body-style="{padding:0}">
                    <div slot="header">
                        <span style="font-weight: bold;">工单日志</span>
                    </div>
                    <div style="margin-top: 25px">
                        <el-timeline v-loading="loading">
                            <el-timeline-item
                                    v-for="(item, index) in list.log"
                                    :key="index"
                                    :timestamp="item.created_at">
                                {{item.remark}}
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-card>
            </div>
        </el-drawer>
        <el-dialog title="取消工单" :visible.sync="cancelShow"  :append-to-body="true">
            <el-form :model="cancel_form">
                <el-form-item label="请输入取消原因" label-width="120px">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="cancel_form.remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelShow = false">取 消</el-button>
                <el-button type="primary" @click="cancelWork" :loading="cancelLoading">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="申诉审核" :visible.sync="hangShow"  :append-to-body="true">
            <el-form>
                <el-form-item label="请输入审核信息" label-width="120px">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入审核信息"
                        v-model="feedback_remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="hangShow = false">取 消</el-button>
                <el-button type="primary" @click="feedback(1)" :loading="feedbackLoading">支持商家</el-button>
                <el-button type="primary" @click="feedback(2)" :loading="feedbackLoading">支持达人</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "WorkDetailDialog",
        data(){
            return {
                show: false,
                loading: false,
                work_id:'',
                process_status:'success',
                list:{
                    work:{
                        submit_img:'',
                        step:{
                            steps:[],
                        },
                        hang_up:[],
                    },
                    shop:{},
                    receiver:{},
                    log:[],
                    order:{
                        remark:'',
                        shop_img:[],
                    },
                    settlement:[],
                },
                accept_form:{
                    work_id:'',
                    accept_remark:'',
                    accept:'',
                },
                settlement_form:{
                    work_id:'',
                    settlement: '',
                    settlement_remark:'',
                    settlement_amount:'',
                },
                cancelShow:false,
                cancelLoading:false,
                cancel_form:{
                    work_id:'',
                    remark:'',
                },
                hangShow:false,
                feedback_remark:'',
                feedbackLoading:false,
            }
        },
        methods:{
            init(work_id){
                this.work_id = work_id;
                this.cancel_form.work_id = this.work_id;
                this.loadData();
                this.show = true;
            },
            loadData(){
                this.loading = true;
                this.post('/api/laifei/work/detail',{work_id:this.work_id}).then(result=>{
                    if(result.code === 0){
                        this.list = result.data;
                        if(result.data.work.step.err_msg){
                            this.process_status = 'error'
                        } else {
                            this.process_status = 'success'
                        }
                        if(this.list.work.status === 1){ // 待验收
                            this.$refs['accept_form'].resetFields();
                            this.accept_form.work_id = this.work_id;
                        }
                        if(this.list.work.status === 3){ // 待结算
                            this.settlement_form = {
                                work_id: this.work_id,
                                settlement: '',
                                settlement_remark: '',
                                settlement_amount: result.data.work.settlement_amount,
                            };
                        }
                    } else {
                        this.$message.error(result.msg);
                    }
                    this.loading = false;
                })
            },
            onAccept(){
                let form = this.accept_form;
                if(form.accept === ''){
                    this.$message.info('请选择是否验收通过');
                    return;
                }
                if(form.accept === false && !form.accept_remark){
                    this.$message.info('拒回时请输入验收意见');
                    return;
                }
                this.post('/api/laifei/work/accept',form).then(result=>{
                    if(result.code === 0){
                        this.$message.success(result.msg);
                        this.loadData();
                        this.$emit('refresh');
                    } else {
                        this.$message.error(result.msg);
                    }
                })
            },
            onSettlement(){
                let form = this.settlement_form;
                if(form.settlement === ''){
                    this.$message.info('请选择是否通过结算');
                    return;
                }
                if(!form.settlement_remark){
                    this.$message.info('请输入结算备注');
                    return;
                }
                let confirm_text = '结算后将直接打款给用户，是否确定继续？';
                if(form.settlement === false){
                    confirm_text = '您将拒回该投稿，用户需重新投稿并在七天后重新验收审核';
                }
                this.$confirm(confirm_text, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.post('/api/laifei/work/settlement',form).then(result=>{
                        if(result.code === 0){
                            this.$message.success(result.msg);
                            this.loadData();
                            this.$emit('refresh');
                        } else {
                            this.$message.error(result.msg);
                        }
                    })
                });
            },
            cancelWork(){
                let cancel_form = this.cancel_form;
                if(!cancel_form.remark){
                    this.$message.error('请输入取消原因');
                    return;
                }
                this.$confirm('此操作将永久关闭该工单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.cancelLoading = true;
                    this.post('/api/laifei/work/cancel',cancel_form).then(result=>{
                        if(result.code === 0){
                            this.$message.success('关闭成功');
                            this.loadData();
                            this.$emit('refresh');
                            this.cancelShow = false;
                        } else {
                            this.$message.error(result.msg);
                        }
                        this.cancelLoading = false;
                    });

                }).catch(() => {
                    this.$message.info('已取消');
                });
            },
            // 申诉审核
            hangUp(hang_id){
                this.hang_id = hang_id;
                this.hangShow = true;
            },
            // 申诉审核
            feedback(feedback){
                if(!this.feedback_remark){
                    this.$message.error('请输入审核意见');
                    return;
                }
                this.$confirm('确定您的审核结果?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.feedbackLoading = true;
                    this.post('/api/laifei/work/feedback',{
                        hang_id: this.hang_id,
                        feedback:feedback,
                        feedback_remark:this.feedback_remark,
                    }).then(result=>{
                        if(result.code === 0){
                            this.$message.success('审核成功');
                            this.loadData();
                            this.$emit('refresh');
                            this.hangShow = false;
                        } else {
                            this.$message.error(result.msg);
                        }
                        this.feedbackLoading = false;
                    });

                }).catch(() => {
                    this.$message.info('已取消');
                });
            },
            // 红包重发
            resend(work_id){
                this.$confirm('将给这位达人进行补发红包, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.post('/api/laifei/work/settlement/resend', {work_id: work_id}).then(result => {
                        if (result.code === 0) {
                            this.$message.success(result.msg);
                            this.loadData();
                            this.$emit('refresh');
                        } else {
                            this.$message.error(result.msg);
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            }
        }
    }
</script>

<style scoped>
    .submit_form>div{
        flex: 0 0 100%;
    }
</style>
<style>
    .detail_form{
        padding: 0 10px;
    }
    .detail_form .el-card{
        margin-bottom: 10px;
    }
    .detail_form .el-form-item{
        margin-bottom: 0;
    }
    .detail_form .el-form{
        display: flex;
        flex-wrap: wrap;
    }
    .detail_form .el-form-item{
        flex: 0 0 33%;
    }
    .detail_form .el-card__header{
        padding: 8px 20px;
    }
    .box-card {
        width: 100%;
    }
</style>
